<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品管理系统</title>
    <link rel="stylesheet" href="static/css/style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <!-- 侧边栏 -->
        <div class="col-md-3 col-lg-2 sidebar">
            <h2 class="text-center mt-3">产品管理</h2>
            <div class="list-group mt-4">
                <button class="list-group-item list-group-item-action active" onclick="showView('list')">
                    产品列表
                </button>
                <button class="list-group-item list-group-item-action" onclick="showView('create')">
                    添加产品
                </button>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="col-md-9 col-lg-10 main-content">
            <!-- 产品列表视图 -->
            <div id="list-view" class="view">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h3>产品列表</h3>
                    <button class="btn btn-primary" onclick="showView('create')">
                        <i class="bi bi-plus"></i> 添加产品
                    </button>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>名称</th>
                            <th>型号</th>
                            <th>品牌</th>
                            <th>采购价</th>
                            <th>零售价</th>
                            <th>库存范围</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="products-table">
                        <!-- 产品数据将通过 JavaScript 动态填充 -->
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 添加产品视图 -->
            <div id="create-view" class="view" style="display: none;">
                <h3>添加新产品</h3>
                <form id="product-form" class="mt-4">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">产品名称 *</label>
                                <input type="text" class="form-control" name="name" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control" name="model">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control" name="brand">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">分类ID</label>
                                <input type="number" class="form-control" name="category_id">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">采购价格</label>
                                <input type="number" step="0.01" class="form-control" name="purchase_price">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">零售价格</label>
                                <input type="number" step="0.01" class="form-control" name="retail_price">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">单位</label>
                                <input type="text" class="form-control" name="unit">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">最低库存</label>
                                <input type="number" class="form-control" name="min_stock">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">最高库存</label>
                                <input type="number" class="form-control" name="max_stock">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">规格参数</label>
                        <textarea class="form-control" name="specs" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">产品描述</label>
                        <textarea class="form-control" name="description" rows="3"></textarea>
                    </div>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-success">保存产品</button>
                        <button type="button" class="btn btn-secondary" onclick="showView('list')">取消</button>
                    </div>
                </form>
            </div>

            <!-- 编辑产品视图 -->
            <div id="edit-view" class="view" style="display: none;">
                <h3>编辑产品</h3>
                <form id="edit-form" class="mt-4">
                    <input type="hidden" name="id" id="edit-id">
                    <!-- 表单字段与创建表单相同 -->
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="static/js/script.js"></script>
</body>
</html>